<template>
    <div>
        <!--        <h2>动态添加类名</h2>-->
        <!-- 第一种方式:对象的形式 -->
        <!-- 第一个参数 类名， 第二个参数：boolean值 -->
        <!-- 对象的形式: 用花括号包裹起来，类名用引号， -->
        <!-- 优点: 以对象的形式可以写多个，用逗号分开 -->
        <p :class="{'sm' : true}">对象的形式</p>
        <hr>

        <p :class="{'sm' : useSmClass, 'lg': !useSmClass}">对象的形式</p>
        <button @click="alterClass">切换class选择器样式</button>


    </div>
</template>

<script>
    export default {
        name: "TestCssClass1",
        data() {
            return {
                useSmClass: false
            }
        },
        methods: {
            alterClass() {
                if (this.useSmClass === false) {
                    this.useSmClass = true;
                } else {
                    this.useSmClass = false;
                }

            }
        }
    }
</script>

<style scoped>
    .sm {
        font-size: 15px;
    }

    .lg {
        font-size: 30px;
    }


</style>